<template>
  <div>
    <div class="detial-body">
      <div class="index-memo-top">
        <img :src="info.index_img" class="index-memo-cover" />
        <!-- <el-image
                  :src="info.index_img"
                  fit="cover"
                  class="index-memo-cover"
                ></el-image> -->
        <div class="index-memo-top-right">
          <div class="index-memo-title">
            <span>{{ info.name }}</span>
            <span class="index-memo-title-red index-memo-title-dian">·</span>
            <span class="index-memo-title-red">{{ info.type_name }}</span>
          </div>
          <div class="index-memo-brief" v-for="item in info.brief" :key="item.id">
            <img v-if="item.type == 1" src="../../assets/img/03.png" class="index-memo-brief-icon" />
            <img v-if="item.type == 0" src="../../assets/img/02.png" class="index-memo-brief-icon" />
            <div class="index-memo-brief-txt">
              {{ item.content }}
            </div>
          </div>
          <!-- <div class="index-memo-brief">
                      <img
                        src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/index-down-icon.png"
                        class="index-memo-brief-icon"
                      /> -->
          <!-- <div class="index-memo-brief-txt" v-if="id == 1">
                        医疗费用最高达20万元/人，住院期间补贴100元/天
                      </div>
                      <div class="index-memo-brief-txt" v-else>医疗高达15万/人</div> -->
        </div>
        <!-- <div class="index-memo-brief">
                    <img
                      src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/index-down-icon.png"
                      class="index-memo-brief-icon"
                    />
                    <div class="index-memo-brief-txt" v-if="id == 1">
                      保障作业现场第三方责任及新机完工
                    </div>
                    <div class="index-memo-brief-txt" v-else>
                      保作业现场第三方人伤和物损责任（限家用场所）
                    </div>
                  </div> -->
        <div class="index-memo-bottom">
          <div class="index-card-footer-btn index-card-footer-btn-red index-memo-bottom-text" style="margin-left: 0"
            @click="toForm()">
            <div>立即投保</div>
          </div>
        </div>
      </div>
      <!-- tab-->
      <div class="detail-tab">
        <div @click="changeTab(key)" :class="key == tab_index ? 'detail-tab-item active' : 'detail-tab-item'
          " v-for="(item, key) in tabs" :key="'tab' + key">
          {{ item }}
        </div>
        <div class="detail-tab-line" :style="{
          left: tab_index * 160 + 'px',
        }"></div>
      </div>
      <div v-if="tab_index == 0">
        <div class="type_btn_body" v-if="info.select_list !== undefined && info.select_list.length != 0">
          <div class="type_btn" v-for="(item, index) in info.select_list" :key="index"
            :class="item.chooseTrue ? 'active_btn' : ''" @click="changeBtn(index)">
            {{ item.name }}
          </div>
        </div>
        <div class="detail-table" v-if="id != 9">
          <div class="detail-table-item detail-table-item-bl">
            <div class="detail-tab-item-line detail-tab-item-head">
              保障方案
            </div>
            <div class="detail-tab-item-line">
              <div class="detail-tab-item-bg">医疗费用</div>
            </div>
            <div class="detail-tab-item-line">
              <div class="detail-tab-item-bg">误工费</div>
            </div>
            <div class="detail-tab-item-line" v-if="id == 2">
              <div class="detail-tab-item-bg">住院津贴</div>
            </div>
            <div class="detail-tab-item-line">
              <div class="detail-tab-item-bg">法律费用</div>
            </div>
            <div class="detail-tab-item-line">
              <div class="detail-tab-item-bg">主险保费</div>
            </div>
            <div class="detail-tab-item-line" v-if="info.is_third">
              <div class="detail-tab-item-bg">三者保费</div>
            </div>
            <div class="detail-tab-item-line" v-if="info.is_finished">
              <div class="detail-tab-item-bg">完工责任保费</div>
            </div>
          </div>
          <div class="detail-table-item detail-table-item-hover" v-for="(item, index) in chooseDta.fananlist"
            :key="index">
            <div class="detail-tab-item-line detail-tab-item-head">
              <!-- 表头 -->
              {{ chooseDta.fanan[item].name }}
            </div>

            <div class="detail-tab-item-line">
              {{ chooseDta.fanan[item].ylfy.price }}
            </div>
            <div class="detail-tab-item-line">
              {{ info.wgf.price }}
            </div>
            <div class="detail-tab-item-line" v-if="id == 2">100元/天</div>
            <div class="detail-tab-item-line">
              {{ info.flfy }}
            </div>
            <div class="detail-tab-item-line" style="color: #f95d4a">
              <!-- 表头 -->
              {{ chooseDta.fanan[item].price }}元/年
            </div>
            <div class="detail-tab-item-line" style="color: #f95d4a" v-if="info.is_third">
              {{ info.third.name }}
            </div>
            <div class="detail-tab-item-line" style="color: #f95d4a" v-if="info.is_finished">
              {{ info.finished.name }}
            </div>
          </div>
        </div>
        <div v-if="id == 9">
          <cdz2Item :chooseDta="chooseDta" :info="info" :fananlist="chooseDta.fananlist"></cdz2Item>
        </div>
        <div class="detail-table-p" v-if="id == 4 || id == 7 || id == 8">
          <div class="detail-table-p-left flex-column">
            <div>第三者附加险</div>
            <!-- <div>(含新机险)</div> -->
          </div>
          <div class="detail-table-p-right1">
            <div class="detail-table-p-l" v-if="id == 4 || id == 7 || id == 8">
              <div>
                年度累计赔偿限额100万，<span style="color: #f95d4a">每次事故赔偿限额60万</span>，其中每次人身伤亡赔偿限额50万，每次财产损失赔偿限额10万。<span
                  style="color: #f95d4a">每次事故财产损失绝对免赔额为RMB1000元或损失金额10%（以高者为准）</span>，人伤无免赔。
              </div>
            </div>
          </div>
        </div>
        <div class="detail-table-footer" v-if="id == 4 || id == 7 || id == 8">
          <div class="detail-table-footer-left-two">24小时意外</div>
          <div class="detail-table-footer-right-two">
            <div>
              扩展在保人员全天24小时，因工作原因发生意外伤害事故导致死亡、伤残和医疗费赔偿。非工作原因导致的个人意外，不属于保障范围。
              <!-- {{
                id == 4
                  ? "扩展在保人员全天24小时，因工作原因发生意外伤害事故导致死亡、伤残和医疗费赔偿。非工作原因导致的个人意外，不属于保障范围。"
                  : "扩展承保保险期内雇员因发生个人意外事故而导致的死亡、伤残赔偿(接私活除外)"
              }} -->
            </div>
          </div>
        </div>
        <div class="detail-table-footer" v-if="id != 4 && id != 2 && id != 5 && id != 7 && id != 8 && id != 9">
          <div class="detail-table-footer-left">每次事故赔偿限额</div>
          <div class="detail-table-footer-right">
            人数*每人保额，最高不超过 5000 万
          </div>
        </div>
        <div class="detail-table-footer" v-if="id == 2">
          <div class="detail-table-footer-left">附加24小时意外</div>
          <div style="
              text-align: left;
              flex: 1;
              line-height: 26px;
              padding: 0px 10px;
            ">
            扩展被保人员全天24小时因意外伤害导致的死亡、伤残事故，保险人以保险单明细表及特约中列明的限额为限承担赔偿责任，其中非工作意外的赔偿限额为主险赔偿限额的50%。
          </div>
        </div>
        <div class="detail-table-footer" v-if="id == 2">
          <div class="detail-table-footer-left">新机完工责任险</div>
          <div style="
              text-align: left;
              flex: 1;
              line-height: 26px;
              padding: 0px 10px;
            ">
            <div>含新机完工90天内完工责任保障;</div>
            <div>财产损失每次免赔1000元或10%，以高者为准；</div>
            <div>共用第三者责任赔偿限额。</div>
          </div>
        </div>
        <div class="detail-table-p" v-if="id == 1 || id == 4 || id == 5 || id == 7 || id == 8">
          <div class="detail-table-p-left">赔偿标准</div>
          <div class="detail-table-p-right">
            <div class="detail-table-p-txt-one" v-if="id != 5">
              <span v-if="id == 1">
                1、从事高处作业必须佩戴安全带，未系安全带发生的身故案件需扣除20%免赔；<br />
                2、伤残赔付比例为5%起。
              </span>
              <span v-if="id != 1">
                医疗费用：医疗费用免赔 0 元，剩余部分 100%赔，含自费药。</span>
            </div>
            <div class="detail-table-p-txt" v-if="id != 5">
              <!-- <span v-if="id == 1"
                >误工费：免赔 0 天，累计赔偿 180 天，住院出院均赔。</span
              > -->
              <span v-if="id != 1">
                <span v-if="id == 4 || id == 7">误工费：100元/天，每人累计赔偿不超过180天。</span>
                <span v-else>误工费：包含住院期间以及出院后的休息误工时间，180天为限。</span>
              </span>
            </div>
            <div class="detail-table-p-txt" v-if="id == 5">
              <span>该伤残等级赔付限额比例适用于本保单主险及附加险的各个部分。</span>
            </div>

            <div class="detail-table-p-table" v-if="id != 5">
              <div class="detail-table-p-table-item1">伤残等级</div>
              <div class="detail-table-p-table-item">一级</div>
              <div class="detail-table-p-table-item">二级</div>
              <div class="detail-table-p-table-item">三级</div>
              <div class="detail-table-p-table-item">四级</div>
              <div class="detail-table-p-table-item">五级</div>
              <div class="detail-table-p-table-item">六级</div>
              <div class="detail-table-p-table-item">七级</div>
              <div class="detail-table-p-table-item">八级</div>
              <div class="detail-table-p-table-item">九级</div>
              <div class="detail-table-p-table-item">十级</div>
            </div>
            <div class="detail-table-p-table detail-table-p-table-nb" v-if="id != 5 && id != 1 && id != 8">
              <div class="detail-table-p-table-item1">赔偿限额比例</div>
              <div class="detail-table-p-table-item">100%</div>
              <div class="detail-table-p-table-item">90%</div>
              <div class="detail-table-p-table-item">80%</div>
              <div class="detail-table-p-table-item">70%</div>
              <div class="detail-table-p-table-item">60%</div>
              <div class="detail-table-p-table-item">50%</div>
              <div class="detail-table-p-table-item">40%</div>
              <div class="detail-table-p-table-item">30%</div>
              <div class="detail-table-p-table-item">20%</div>
              <div class="detail-table-p-table-item">{{ levelTenNum }}%</div>
            </div>
            <div class="detail-table-p-table detail-table-p-table-nb" v-if="id == 8">
              <div class="detail-table-p-table-item1">赔偿限额比例</div>
              <div class="detail-table-p-table-item">
                <span v-if="levelTenNum == 5">100%</span>
                <span v-if="levelTenNum == 1">100%</span>
              </div>
              <div class="detail-table-p-table-item">
                <span v-if="levelTenNum == 5">80%</span>
                <span v-if="levelTenNum == 1">80%</span>
              </div>
              <div class="detail-table-p-table-item">
                <span v-if="levelTenNum == 5">70%</span>
                <span v-if="levelTenNum == 1">65%</span>
              </div>
              <div class="detail-table-p-table-item">
                <span v-if="levelTenNum == 5">60%</span>
                <span v-if="levelTenNum == 1">55%</span>
              </div>
              <div class="detail-table-p-table-item">
                <span v-if="levelTenNum == 5">50%</span>
                <span v-if="levelTenNum == 1">45%</span>
              </div>
              <div class="detail-table-p-table-item">
                <span v-if="levelTenNum == 5">40%</span>
                <span v-if="levelTenNum == 1">25%</span>
              </div>
              <div class="detail-table-p-table-item">
                <span v-if="levelTenNum == 5">30%</span>
                <span v-if="levelTenNum == 1">15%</span>
              </div>
              <div class="detail-table-p-table-item">
                <span v-if="levelTenNum == 5">20%</span>
                <span v-if="levelTenNum == 1">10%</span>
              </div>
              <div class="detail-table-p-table-item">
                <span v-if="levelTenNum == 5">10%</span>
                <span v-if="levelTenNum == 1">4%</span>
              </div>
              <div class="detail-table-p-table-item">{{ levelTenNum }}%</div>
            </div>



            <div class="detail-table-p-table detail-table-p-table-nb" v-if="id != 5 && id == 1">
              <div class="detail-table-p-table-item1">赔偿限额比例</div>
              <div class="detail-table-p-table-item">100%</div>
              <div class="detail-table-p-table-item">90%</div>
              <div class="detail-table-p-table-item">80%</div>
              <div class="detail-table-p-table-item">70%</div>
              <div class="detail-table-p-table-item">60%</div>
              <div class="detail-table-p-table-item">50%</div>
              <div class="detail-table-p-table-item">40%</div>
              <div class="detail-table-p-table-item">15%</div>
              <div class="detail-table-p-table-item">10%</div>
              <div class="detail-table-p-table-item">5%</div>
            </div>
            <div class="detail-table-p-table-new" v-if="id == 5">
              <div class="detail-table-p-table-item1-new topColor">
                伤残等级
              </div>
              <div class="detail-table-p-table-item-new topColor">10级</div>
              <div class="detail-table-p-table-item-new topColor">9级</div>
              <div class="detail-table-p-table-item-new topColor">8级</div>
              <div class="detail-table-p-table-item-new topColor">7级</div>
              <div class="detail-table-p-table-item-new topColor">6级</div>
              <div class="detail-table-p-table-item-new topColor">5级</div>
              <div class="detail-table-p-table-item-new topColor">4级</div>
              <div class="detail-table-p-table-item-new topColor">3级</div>
              <div class="detail-table-p-table-item-new topColor">2级</div>
              <div class="detail-table-p-table-item-new topColor">1级</div>
            </div>
            <div class="detail-table-p-table-new detail-table-p-table-nb-new" v-if="id == 5">
              <div class="detail-table-p-table-item1-new">赔偿限额比例</div>
              <div class="detail-table-p-table-item-new">5%</div>
              <div class="detail-table-p-table-item-new">10%</div>
              <div class="detail-table-p-table-item-new">20%</div>
              <div class="detail-table-p-table-item-new">30%</div>
              <div class="detail-table-p-table-item-new">40%</div>
              <div class="detail-table-p-table-item-new">50%</div>
              <div class="detail-table-p-table-item-new">60%</div>
              <div class="detail-table-p-table-item-new">70%</div>
              <div class="detail-table-p-table-item-new">80%</div>
              <div class="detail-table-p-table-item-new">100%</div>
            </div>
          </div>
        </div>
        <div class="detail-table-p" v-if="id != 4 && id != 2 && id != 5 && id != 7 && id != 8 && id != 9">
          <div class="detail-table-p-left flex-column">
            <div>第三者附加险</div>
            <!-- <div>(含新机险)</div> -->
          </div>
          <div class="detail-table-p-right1">
            <div class="detail-table-p-l" v-if="id == 4">
              <div>
                年度累计赔偿限额100万，<span style="color: #f95d4a">每次事故赔偿限额60万</span>，其中每次人身伤亡赔偿限额50万，每次财产损失赔偿限额10万。<span
                  style="color: #f95d4a">每次事故财产损失绝对免赔额为RMB1000元或损失金额10%（以高者为准）</span>，人伤无免赔。
              </div>
            </div>
            <div class="detail-table-p-l" v-if="id == 1">
              <div>
                1、含安装维修现场发生并发现的第三者财产损失及人员伤亡赔偿责任，工单机器损失及特定财产不属于第三者保障范围。
              </div>
              <div>
                2、年度累计赔偿限额100万元，每次事故赔偿限额60万元，其中每次人身伤亡赔偿限额50万元，每次财产损失赔偿限额10万元。
              </div>
              <div>
                3、每次事故财产损失免赔1000元或损失金额的10%，以高者为准。人身伤亡无免赔。
              </div>
            </div>
            <!-- <div class="detail-table-p-l" v-if="id == 1">
              <div>1、死亡伤残无免赔； 2、人伤无免赔，100%赔付</div>
            </div> -->
            <!-- <div
              class="detail-table-p-l"
              style="border-bottom: 0"
              v-if="id == 1"
            >
              <div>
                财产损失每次事故绝对免赔额 500 元或损失金额的 10% ，两者
                以高者为准
              </div>
            </div> -->
            <div class="detail-table-p-l" v-if="id == 2" style="text-align: center">
              <div>全年累计限额50万</div>
              <div>其中每人每次事故赔偿限额20万，</div>
              <div>每次财产损失限额10万</div>
            </div>
            <div class="detail-table-p-l" v-if="id == 2" style="border-bottom: 0; text-align: center">
              <div>财产损失∶每次事故200元或损失金额的10%，两者以高者为准;</div>
              <div>死亡伤残∶无免赔;</div>
              <div>人伤∶无免赔，100%赔付;</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tab_index == 1">
        <div class="detail-rich" v-html="rich1"></div>
      </div>
      <div v-if="tab_index == 2">
        <div class="detail-rich" v-html="rich2"></div>
      </div>
      <div v-if="tab_index == 3">
        <div class="detail-rich" v-html="rich3"></div>
      </div>
      <div v-if="tab_index == 4">
        <div class="detail-rich" v-html="rich4"></div>
      </div>
      <div v-if="tab_index == 5">
        <div class="detail-rich" v-html="rich5"></div>
      </div>
    </div>
  </div>
</template>

<script>
import cdz2Item from "../../components/cdz2/cdz2Item.vue";
export default {
  components: {
    cdz2Item,
  },
  data() {
    return {
      tabs: [
        "保险详情",
        "投保须知",
        "客户公告",
        "特别约定",
        "责任免除",
        "常见问题",
      ],
      tab_index: 0,
      id: 0,
      info: {},
      rich1: "",
      rich2: "",
      rich3: "",
      rich4: "",
      rich5: "",
      chooseDta: {},
      levelTenNum: 10,
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    console.log(this.id);
    this.getData();
    this.getRich1();

    // this.open();
  },
  methods: {
    changeBtn(index) {

      this.info.select_list.forEach((item) => {
        item.chooseTrue = false;
      });
      this.info.select_list[index].chooseTrue = true;
      this.chooseDta = this.info[this.info.select_list[index].value];
      this.levelTenNum = this.info.select_list[index].value;
      this.$forceUpdate();
    },
    open() {
      if (this.$store.state.loginState == false) {
        // 查看方案-登录判断
        // return this.$router.push({
        //   path: "/index/login/login",
        // });
      } else {
        this.ajaxs("home/getNoNay", {
          data: { id: this.id },
          success: (res) => {
            if (res.code) {
              this.$confirm("您有待支付订单知否跳转查看？\n", "重要提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  this.$router.push({
                    path: "/index/order/list/2",
                  });
                })
                .catch(() => { });
            }
          },
        });
      }
    },
    toForm() {
      if (this.$store.state.loginState == false) {
        // 查看方案-登录判断
        return this.$router.push({
          path: "/index/login/login",
        });
      } else {
        this.$alert(
          "尊敬的客户，您即将进入太平洋保险的产品投保流程。根据银保监会[2020] 26号的监管规定，为了维护您的权益，您在投保过程中的完整操作轨迹将被记录，请您仔细阅读条款、责任免除、特别约定等内容。\n",
          "重要提示",
          {
            confirmButtonText: "确定",
            callback: (action) => {
              if (action == "confirm") {
                if (this.$store.state.loginState == false) {
                  return this.$router.push({
                    path: "/index/login/login",
                  });
                }

                this.$router.push({
                  path: "/index/index/form/" + this.id,
                });
              }
            },
          }
        );
      }
    },
    getRich1() {
      this.ajaxs("index/getInsureContent", {
        data: {
          id: this.id,
        },
        success: (res) => {
          this.rich1 = res.msg.notice;
          this.rich2 = res.msg.inform;
          this.rich3 = res.msg.contributing;
          this.rich4 = res.msg.exempt;
          this.rich5 = res.msg.problem;
        },
      });
    },
    getData() {
      this.ajaxs("index/detail", {
        data: {
          id: this.id,
        },
        success: (res) => {
          this.info = res.msg;

          // window.document.title=this.info.name
          if (this.info.select_list.length == 0) {
            this.chooseDta.fanan = this.info.fanan;
            this.chooseDta.fananlist = this.info.fananlist;
          } else {
            this.info.select_list[0].chooseTrue = true;
            this.chooseDta = this.info[this.info.select_list[0].value];
            this.levelTenNum = this.info.select_list[0].value;
          }
        },
      });
    },
    changeTab(index) {
      this.tab_index = index;
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/index/index.css";
@import "../../assets/css/index/detail.css";

.topColor {
  background-color: #f3f3f3;
}

.detail-table-p-table-new {
  display: flex;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.detail-table-p-table-nb-new {
  border-top: none;
}

.detail-table-p-table-item1-new {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-right: 1px solid #dfdfdf;
  border-left: 1px solid #dfdfdf;
}

.detail-table-p-table-item-new {
  flex: 1;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-right: 1px solid #dfdfdf;
}

.type_btn_body {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.type_btn {
  width: 130px;
  height: 40px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999999;
  border: 1px solid #e6e6e6;
  cursor: pointer;
  margin-right: 20px;
}

.active_btn {
  border: 1px solid #f76b6d;
  color: #ffffff;
  background-color: #f76b6d;
}
</style>
